<style scoped >
.canter .ivu-form-item .ivu-form-item-content .ivu-input-wrapper{width: 90%;}
</style>
<template>
    <div class="console-product">
        <!--头部-->
        <Row class="position">
            <i-col span="24">
                <div class="ivu-breadcrumb pos">
                    <span class="ivu-breadcrumb-item-link">当前位置：</span>
                    <span class="ivu-breadcrumb-item-link">物流中心</span>
                    <span class="ivu-breadcrumb-item-separator">/</span>
                    <span class="ivu-breadcrumb-item-link">发票管理</span>
                </div>
            </i-col>
        </Row>
        <!--头部结束-->
        <!--主体部分-->
        <div class="console-product-contcent invoice" id="contcentHeight" :style="{height:height +'px'}">
            <Form class="searchform" ref="inviceForm" :model="inviceForm" inline>
                <Form-item label="销售单据号:" :label-width="80" style="width: 160px">
                    <Input v-model="inviceForm.salesno" @on-enter="invoiceSearch"></Input>
                </Form-item>
                <Form-item label="客户编码:" :label-width="70" style="width: 160px">
                    <Input v-model="inviceForm.customerno" @on-enter="invoiceSearch"></Input>
                </Form-item>
                <Form-item label="客户名称:" :label-width="70"  style="width: 160px">
                    <Input v-model="inviceForm.customername" @on-enter="invoiceSearch"></Input>
                </Form-item>
                <Form-item label="状态:" :label-width="35"  style="width: 120px">
                    <Select v-model="inviceForm.status" filterable>
                        <Option v-for="item in state" :value="item.value" :key="item">{{ item.label }}</Option>
                    </Select>
                </Form-item>
                <Form-item label="生成时间:" :label-width="65" style="width: 265px">
                    <Date-picker type="daterange" v-model="inviceForm.createtime" :options="time0ptions" style="width: 200px"></Date-picker>
                </Form-item>
                <Form-item>
                    <Button class="search" @click="invoiceSearch">搜索</Button>
                </Form-item>
            </Form>
            <Loading v-if="spinShow"></Loading>
            <Table v-if="tableShow" stripe border :columns="invoiceColumns" ref="invoiceData" :data="invoiceData" ></Table>
        </div>
        <Row style="background-color: #ffffff;margin-top: 1px;">
            <Col>
            <div v-if="tableShow" class="tablepage clearfix">
                <div class="fl">
                    <span>共</span>
                    <span class="num">{{total}}</span>
                    <span>条记录</span>
                    <span>{{currentPage}}/{{pageTotal}}页</span>
                </div>
                <div class="fr">
                    <Page :total="total" :page-size="pageSize" :current="currentPage" placement="top" show-elevator show-sizer @on-change="changePage" @on-page-size-change="changeSize"></Page>
                </div>
            </div>
            </Col>
        </Row>
        <!--编辑发票信息-->
        <Modal class-name="popup" v-model="editInvoiceModal" width="340" :mask-closable="false"  @on-cancel="close('editInvoice')" >
            <p slot="header" style="color: #eeebeb" v-drag>
                <span>编辑发票信息</span>
            </p>
            <div class="canter">
                <Form ref="editInvoice" :model="editInvoice" :rules="rulesInvoice" label-position="left" :label-width="80">
                    <input type="hidden" name="id" v-model="editInvoice.id">
                    <Row>
                        <i-col>
                            <Form-item label="销售单据号:">
                                <span>{{editInvoice.salesno}}</span>
                            </Form-item>
                        </i-col>
                        <i-col>
                            <Form-item label="客户名称:" prop="customername">
                                <Input v-model="editInvoice.customername"></Input>
                            </Form-item>
                        </i-col>
                        <i-col>
                            <Form-item label="销售数量:" prop="amount">
                                <Input v-model="editInvoice.amount"></Input>
                            </Form-item>
                        </i-col>
                        <i-col>
                            <Form-item label="含税金额:" prop="taxamount">
                                <Input v-model="editInvoice.taxamount" ></Input>
                            </Form-item>
                        </i-col>
                    </Row>
                </Form>
            </div>
            <div slot="footer">
                <div class="footer">
                    <Button class="save" :loading="modal_loading" @click="modify('editInvoice')">修改</Button>
                    <Button class="clear" @click="cancel('editInvoice')">取消</Button>
                </div>
            </div>
        </Modal>
    </div>
</template>
<script>
    import Loading from '../../components/loading';
    export default {
        //所需子组件
        components: {Loading},
        data () {
            const validateNum2 = (rule, value, callback) => {
                if (!/^[0-9]+$/.test(value)) {
                    callback(new Error('请输入整数!'));
                }else {
                    callback();
                }
            };
            const validateNum = (rule, value, callback) => {
                if (!/^\d+(\.\d{1,2})?$/.test(value)) {
                    callback(new Error('请输入数字(最多保留两位小数)'));
                }else {
                    callback();
                }
            };
            return {
                total:0,//总条数
                currentPage:1,//当前页
                pageTotal:1,//总页数
                pageSize:10,//默认每页显示数量
                height:1000,//表单高度
                spinShow: true,//加载层，默认显示
                tableShow: false,//表格层，默认隐藏
                modal_loading: false,//加载
                //状态选择
                state:[
                    {
                        value:' ',
                        label:'全部'
                    },
                    {
                        value:'1',
                        label:'已操作'
                    },
                    {
                        value:'0',
                        label:'未操作'
                    },
                    {
                        value:'-1',
                        label:'失败'
                    }
                ],
                //搜索
                inviceForm: {
                    salesno: '',//销售单据号
                    customerno: '',//客户编码
                    customername: '',//客户名称
                    status: ' ',//状态
                    createtime: [new Date().getTime() - 3600 * 1000 * 24 * 7,new Date()]//生成时间
                },
                time0ptions:{
                    shortcuts: [
                        {
                            text: '最近一周',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近一个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近三个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                return [start, end];
                            }
                        }
                    ]
                },
                //发票管理表格数据
                invoiceColumns:[
                    {
                        width:'10%',
                        title:'销售单据号',
                        key:'salesno',
                        render: (h, params) => {
                        return h('Tooltip', {
                            props: {
                                content: params.row.salesno,
                                placement:"bottom-start"
                            }
                        }, [h('span', params.row.salesno)]);
                    }
                    },
                    {
                        width:'16%',
                        title:'客户编码',
                        key:'customerno',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.customerno,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.customerno)]);
                        }
                    },
                    {
                        width:'14%',
                        title:'客户名称',
                        key:'customername',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.customername,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.customername)]);
                        }
                    },
                    {
                        width:'6%',
                        title:'销售数量',
                        key:'amount',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.amount,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.amount)]);
                        }
                    },
                    {
                        width:'6%',
                        title:'含税金额',
                        key:'taxamount',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.taxamount,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.taxamount)]);
                        }
                    },
                    {
                        width:'6%',
                        title:'开票类型',
                        key:'type',
                        render: (h, params) => {
                            var text = params.row.type == 0 ? '专用发票' : params.row.type == 2 ?  '普通发票':'未知';
                            return h('Tooltip', {
                                props: {
                                    content: text,
                                    placement:"bottom-start"
                                }
                            }, [h('span', text)]);
                        }
                    },
                    {
                        width:'5%',
                        title:'状态',
                        key:'status',
                        render: (h, params) => {
                            var text = params.row.status == 1 ? '已操作' : params.row.status == 0 ?  '未操作':'失败';
                            return h('Tooltip', {
                                props: {
                                    content: text,
                                    placement:"bottom-start"
                                }
                            }, [h('span', text)]);
                        }
                    },
                    {
                        width:'11%',
                        title:'生成时间',
                        key:'createtime',
                        render: (h, params) => {
                            const text = params.row.createtime != null ? new Date(params.row.createtime).format('yyyy-MM-dd hh:mm:ss') : "";
                            return h('Tooltip', {
                                props: {
                                    content: text,
                                    placement:"bottom-start"
                                }
                            }, [h('span', text)]);
                        }
                    },
                    {
                        width:'19%',
                        title:'备注',
                        key:'remarks',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.remarks,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.remarks)]);
                        }
                    },
                    {
                        width:'6%',
                        title:'操作',
                        key:'id',
                        render: (h, params) => {
                            return h('div', [
                                h('Button',
                                    {
                                        class:"blue",
                                        on: {
                                            click: () => {
                                                this.editInformation(params.row.id)
                                            }
                                        }
                                    }, [
                                        h('i', {
                                            class : 'iconfont icon-daochuzhangdan'
                                        }),
                                        h("span",'编辑')
                                    ])
                            ]);
                        }
                    }
                ],
                invoiceData:[],
                //编辑发票信息
                editInvoice:{
                    id:'',
                    salesno:'',//销售单据号
                    customername:'',//客户名称
                    amount:'',//销售数量
                    taxamount:''//含税金额
                },
                rulesInvoice:{
                    customername:[
                        { required: true, message: '请输入客户名称', trigger: 'blur' },
                        { type: 'string', max: 100, message: '客户名称不能大于100位', trigger: 'blur' }
                    ],
                    amount:[
                        { required: true, message: '请输入销售数量', trigger: 'blur' },
                        { type: 'string', max: 8, message: '销售数量不能大于8位', trigger: 'blur' },
                        {type: "string", validator: validateNum2, trigger: 'blur'}
                    ],
                    taxamount:[
                        { required: true,message: '请输入含税金额', trigger: 'blur' },
                        { type: 'string', max: 8, message: '含税金额不能大于8位', trigger: 'blur' },
                        {type: "string", validator: validateNum, trigger: 'blur'}
                    ]
                },
                editInvoiceModal:false
            }
        },
        created:function(){
            var width = window.innerWidth;
            if(width >1600){
                this.height=window.innerHeight-200;
            }else if(width > 1440 && width <=1600){
                this.height=window.innerHeight-180;
            }else if(width > 1366 && width <=1440){
                this.height=window.innerHeight-172;
            }else if(width > 1280 && width <=1366){
                this.height=window.innerHeight-166;
            }else if(width > 1024 && width <=1280){
                this.height=window.innerHeight-162;
            }else{
                this.height=window.innerHeight-151;
            }
            if(window.innerWidth>1600){
                this.pageSize = 20;
            }
            this.invoiceData = this.invoiceTableData(this.inviceForm,this.currentPage,this.pageSize)
        },
        mounted() {
        },
        methods: {
            //查询物流数据，条件，当前页，每页显示多少条
            invoiceTableData (formData,currentPage,pageSize) {
                this.spinShow=true;
                this.tableShow = false;
                var salesno = formData.salesno;//销售单据号
                var customerno = formData.customerno;//客户编码
                var customername = formData.customername;//客户名称
                var status = formData.status;//状态
                var fromDate = '';//开始时间
                var toDate = '';//结束时间
                if(formData.createtime.length != 0 && formData.createtime[0] != null && formData.createtime[1] != null && formData.createtime[0] != "" && formData.createtime[1] != ""){
                    var fromDateTime = (new Date(formData.createtime[0])).getTime();
                    fromDate = new Date(fromDateTime).format("yyyy-MM-dd");
                    var toDateTime = (new Date(formData.createtime[1])).getTime();
                    toDate = new Date(toDateTime).format("yyyy-MM-dd");
                }
                let data = {
                    params: {
                        pageIndex : currentPage,
                        pageSize : pageSize,
                        salesno : salesno,
                        customerno : customerno,
                        customername : customername,
                        status : status,
                        fromDate : fromDate,
                        toDate : toDate
                    }
                };
                axios.get('/invoices',data).then(res => {
                    this.total=res.data.total;
                    this.pageTotal=Math.ceil(res.data.total / pageSize);
                    for(var i=0;i<res.data.data.length;i++){
                        if(res.data.data[i].status == 1){
                            res.data.data[i].cellClassName = {status:'demo-table-success-column'};
                        }else if(res.data.data[i].status != 0){
                            res.data.data[i].cellClassName = {status:'demo-table-error-column'};
                        }
                    }
                    this.invoiceData = res.data.data;
                    this.spinShow=false;
                    this.tableShow = true;
                }).catch(err =>{
                })
            },
            //条件查询
            invoiceSearch(){
                this.currentPage = 1;
                this.invoiceData = this.invoiceTableData(this.inviceForm,this.currentPage,this.pageSize);
            },
            //改变页数
            changePage: function (page) {
                this.currentPage=page;
                this.invoiceData = this.invoiceTableData(this.inviceForm,this.currentPage,this.pageSize);
            },
            //改变每页显示多少条
            changeSize: function (pageSize) {
                this.currentPage=1;
                this.pageSize = pageSize;
                this.pageTotal=Math.ceil(this.total / this.pageSize);
                this.invoiceData = this.invoiceTableData(this.inviceForm,this.currentPage,this.pageSize);
            },
            //编辑发票管理
            editInformation(column) {
                this.modal_loading = false;
                axios.get('/invoices/'+column).then(res => {
                    this.editInvoice = res.data;
                    this.editInvoice.amount = this.editInvoice.amount.toString();
                    this.editInvoice.taxamount = this.editInvoice.taxamount.toString();
                    this.editInvoiceModal=true;
                }).catch(err =>{
                })
            },
            //修改
            modify(name){
                this.modal_loading = true;
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        axios.put('/invoices', this.editInvoice).then(res => {
                            this.modal_loading = false;
                            this.editInvoiceModal = false;
                            this.$refs[name].resetFields();
                            this.$Message.success('编辑成功');
                            this.invoiceData = this.invoiceTableData(this.inviceForm,this.currentPage,this.pageSize);
                        }).catch(err =>{
                            this.$Message.error({content: err,duration: 0,closable:true});
                            this.modal_loading = false;
                        });
                    } else {
                        this.modal_loading = false;
                    }
                });
            },
            //取消编辑
            cancel(name){
                this.$refs[name].resetFields();
                this.editInvoiceModal = false;

            },
            //关闭重置
            close(name){
                this.$refs[name].resetFields();
                this.editInvoiceModal = false
            },
        }
    }
</script>